<template>
	<div class="early-warning es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
					<div class="widget-head am-cf">
							<div class="widget-title am-fl">重排时间记录</div>
					</div>
	        <div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
						<el-select size="small" @change="handleChangeArea" class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>
	                    <el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
                            v-model="year"
                            type="year"
                            :clearable="false"
                            :editable="false"
                            placeholder="请选择年份">
                        </el-date-picker>
                        <el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
	                        v-model="query.periodId" placeholder="请选择期数">
	                        <el-option
	                            v-for="item in periods"
	                            :key="item.periodId"
	                            :label="item.periodName"
	                            :value="item.periodId">
	                        </el-option>
	                    </el-select>
	                    <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
					               :disabled="busTeams.length === 0" v-model="query.busTeamId" placeholder="请选择业务组">
					    	<el-option
						        v-for="item in busTeams"
						        :key="item.busTeamId"
						        :label="item.name"
						        :value="item.busTeamId">
					    	</el-option>
					    </el-select>
                    </div>
                    <div class="am-u-md-12 one-line">
                    	<el-select class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                           v-model="query.gradeId" clearable placeholder="请选择年级">
		                	<el-option label="请选择年级" value="">
		               		</el-option>
		                	<el-option
			                    v-for="item in grades"
			                    :key="item.gradeId"
			                    :label="item.gradeName"
			                    :value="item.gradeId">
		                	</el-option>
		                </el-select>
		                <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
			                       v-model="query.subjectId" clearable placeholder="请选择科目">
			            	<el-option
				                v-for="item in subjects"
				                :key="item.value"
				                :label="item.label"
				                :value="item.value">
			            	</el-option>
			            </el-select>
			            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.classNo" placeholder="班级编号"/>
				            </div>
				        </div>
				        <el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                	v-model="editDate"
		                	type="daterange"
		                	placeholder="修改日期">
		                </el-date-picker>
			        </div>
			        <div class="am-u-md-12 one-line">
			        	<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    	<button @click="handleExport" type="button" class="btn-search am-btn am-btn-default am-btn-success">
						        <span class="am-icon-search"></span>导出
						    </button>
					    </div>
			        </div>

				    <div class="am-u-sm-12">
			            <el-table
			              :data="tableData"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
			              <el-table-column
			                prop="periodName"
			                label="期数"
			                fixed
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                label="业务组"
			                fixed
			                prop="busTeamName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="年级"
			                fixed
			                prop="gradeName"
			                width="150">
			              </el-table-column>
			              <el-table-column
			                label="学科"
			                prop="subjectName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="班级名称"
			                prop="className"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="班级编号"
			                prop="classNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="班级讲次"
			                prop="lectureNo"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课日期（原）"
			                prop="originClassDate"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课时间（原）"
			                min-width="100">
			                <template scope="scope">
			                  {{ `${scope.row.originStartTime} - ${scope.row.originEndTime}`  }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课日期（现）"
			                prop="classDate"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="上课时间（现）"
			                min-width="100">
			                <template scope="scope">
			                  {{ `${scope.row.startTime} - ${scope.row.endTime}`  }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="修改人"
			                prop="operatorName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="修改时间"
			                min-width="100">
                      <template scope="scope">
                        <div>{{scope.row.createTime | formatTime}}</div>
                      </template>
			              </el-table-column>
			            </el-table>
			        </div>

			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
	</div>
</template>
<script>
import io from "../../lib/io";
import moment from "moment";
import Pagination from "../base/Pagination";
export default {
  data() {
    return {
      tableNoDataTips: "暂无数据",
      tableData: [],
      year: moment().format("YYYY"),
      query: {
        areaTeamId:
          (window.config.areaTeams[0] &&
            window.config.areaTeams[0].areaTeamId) ||
          "",
        busTeamId: "",
        periodId: "",
        gradeId: "",
        subjectId: "",
        classNo: "",
        startDate: "",
        endDate: "",
        pageNo: 1,
        pageSize: 10
      },
      editDate: "",
      total: 0,
      periods: []
    };
  },
  components: {
    Pagination
  },
  watch: {
    year(newVal, oldVal) {
      this.loadPeriodData();
    },
    editDate(newVal) {
      this.query.startDate = newVal[0]
        ? this.$options.filters.formatDate(newVal[0])
        : "";
      this.query.endDate = newVal[1]
        ? this.$options.filters.formatDate(newVal[1])
        : "";
    }
  },
  mounted() {
    $(window).smoothScroll();
  },
  methods: {
    handleChangeArea() {
      this.loadPeriodData();
    },
    loadPeriodData(resolve) {
      io.post(
        io.periodByYearAndAreaTeamId,
        {
          areaTeamId: this.query.areaTeamId,
          year: this.year ? moment(this.year).format("YYYY") : ""
        },
        ret => {
          if (ret.success) {
            this.periods = ret.data;
            if (this.periods.length === 0) {
              this.$alert("当前没有设置期数");
              this.query.periodId = "";
            } else {
              let curPeriodId = ret.data.filter(item => item.isCurrent == 1)[0]
                ? ret.data.filter(item => item.isCurrent == 1)[0].periodId
                : "";
              if (curPeriodId != "") {
                this.query.periodId = curPeriodId;
              } else {
                this.query.periodId = this.periods[0].periodId;
              }
            }
          } else {
            this.$alert(ret.desc);
          }

          if (resolve) {
            resolve("success");
          }
        }
      );
    },
    search() {
      this.query.pageNo = 1;
      this.handleSearch();
    },
    handleSearch(pageNo) {
      let formData = this.getFormDate(pageNo);
      io.post(io.findArrangeLectureHistoryPage, formData, ret => {
        if (ret.success) {
          this.tableData = ret.data.list;
          this.total = ret.data.total;
        }
      });
    },
    getFormDate(pageNo) {
      this.query.pageNo = pageNo || this.query.pageNo || 1;
      let formData = {};
      for (var key in this.query) {
        if (Array.isArray(this.query[key])) {
          formData[key] = this.query[key].join(",");
        } else if (typeof this.query[key] === "boolean") {
          if (this.query[key]) {
            formData[key] = 1;
          }
        } else {
          if ((this.query[key] + "").trim() !== "") {
            formData[key] = this.query[key];
          }
        }
      }
      return formData;
    },
    handleExport() {
      let formData = this.getFormDate();
      io.downloadFile(io.exportArrangeLectureHistory, formData);
    }
  },
  computed: {
    areaTeams() {
      return this.$root.config.areaTeams || [];
    },
    busTeams() {
      let busTeams = this.query.areaTeamId
        ? this.$root.config.groupBusTeams[this.query.areaTeamId] || []
        : [];
      if (busTeams.length) {
        this.query.busTeamId = busTeams[0].busTeamId;
      }
      return busTeams;
    },
    grades: function() {
      return this.$root.config.grades || [];
    },
    subjects() {
      return [{ value: "", label: "全部科目" }].concat(
        this.$root.config.subjects.map(function(item) {
          return { value: item.subjectId, label: item.subjectName };
        })
      );
    }
  },
  created() {
    let promise = new Promise((resolve, reject) => {
      this.loadPeriodData(resolve);
    });
    promise.then(
      value => {
        // success
        this.handleSearch();
      },
      error => {
        // failure
      }
    );
  }
};
</script>
